import React, { useState } from 'react'
import ToastItem from './ToastItem';



interface IProp {
    data: ToastData
}

// let id = 0;
export default function ToastConainer({ data }: IProp) {
    // 定义一个数组，把我们需要的多个弹出层存起来
    // 为了让我们在修改他的时候，可以触发视图的更新，需要变成一个响应式的数据
    const [list, setList] = useState<ToastData[]>([]);

    // 判断， 是否需要把数据传入 list 里面
    // 第一个条件，是因为，我们每点弹出，会增加一个新的 toastData数据
    // 必须是 不在 list 里面的 toastData 我们才添加进数组里面
    // 第二个条件是因为，如果之前删除了，还是会被重新添加进来 ，使用一个标记，记录当前这个 toastData 是否已经被删除过
    if (!list.find(item => item.id == data.id) && !data.isDeleted) {
        // 只有id 不在list里面的数据，才需要添加
        list.push(data)
    }

    const destroy = (id: number) => {
        console.log(`id O ${id}的 item 被 destory了`)
        // 把数据 从 list 里面移除
        let idx = list.findIndex(item => item.id === id)
        const arr = list.splice(idx, 1)
        arr[0].isDeleted = true;
        console.log(arr[0])
        // 更新视图
        setList([...list])
    }
    let items = document.querySelectorAll('.toast-item')
    return (
        <div>
            {
                list.map((item, index) => {
                    // 需要先算好 offset 才能传递给里面
                    // 当前的这个offset ，应该是 上一个 toast-item 组件的 offsetTop + offsetHeight
                    // 如果当前的index是0
                    let space = 10;
                    let offset = 0;
                    if (index == 0) {
                        offset = space;
                    } else {
                        // 新的 toast 的位置，等于 上一个 toast的位置 + 高度
                        let prev = items[index - 1] as HTMLDivElement; // 默认 items 里面便 Element , 我们手动进行转换
                        offset = prev.offsetTop + prev.offsetHeight + space;
                    }
                    return <ToastItem data={item} offset={offset} key={item.id} destroy={destroy} />;
                })
            }
        </div>
    )
}
